<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>文件管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layui/dist/css/layui.css"  media="all">
    <link rel="stylesheet" href="css/bootstrap.min.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <style>
        body{
            background-image: url("image/heibai.jpg");
            background-size:100% 100%;
            background-repeat: no-repeat;
            background-attachment: fixed;"
        }
        .transparentDataTable .layui-table{
            background-color: transparent !important;
        }
        .transparentDataTable .layui-table-view{
            background-color: rgba(0, 0, 0, 0.2) !important;
        }
        .transparentDataTable .layui-table-tool {
            background-color: transparent !important;
        }

        .transparentDataTable .layui-table-tool .layui-icon {
            color: white;
        }

        .transparentDataTable .layui-table-header, .transparentDataTable .layui-table-cell, .layui-table-header thead tr {
            background-color: transparent !important;
        }

        .transparentDataTable .layui-table-header thead th, .transparentDataTable .layui-none {
            /*border: 1px solid #FFFFFF;*/
            color: white !important;
        }

        .transparentDataTable .layui-table tbody tr {
            border: 1px solid #FFFFFF;
            color: white;
        }

        .transparentDataTable .layui-table-init, .transparentDataTable .layui-laypage-limits select, .transparentDataTable .layui-laypage-btn, .transparentDataTable .layui-laypage-skip input {
            background-color: transparent !important;
            color: white;
        }

        .transparentDataTable .layui-table-page a, .transparentDataTable .layui-table-page span {
            color: white !important;
        }


        .transparentDataTable .layui-laypage-limits select, .transparentDataTable .layui-laypage-limits option {
            -webkit-appearance: none; /* google */
            -moz-appearance: none; /* firefox */
            appearance: none; /* IE */
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);   /* 点击去除高亮的颜色*/
            background-color: rgba(0, 0, 0, 0.2) !important;
            color: white;
        }

        .transparentDataTable .layui-table[lay-even] tr:nth-child(even){
            background-color: rgba(180, 238, 180, 0.2) !important;
        }
        /*静态表格透明*/
        .transparentStaticTable .layui-table{
            background-color: rgba(0, 0, 0, 0.2) !important;
        }
        .transparentStaticTable .layui-table tbody tr:hover, .statistics_branch_one .layui-table tbody tr:hover {
            background-color: transparent !important;
        }
    </style>
</head>
<body>

<div class="demoTable">
    <button type="button" class="layui-btn" id="addFile">
        <i class="layui-icon">&#xe654;</i>新建文件夹
    </button>
    <button type="button" class="layui-btn layui-btn layui-btn-warm" id="uploadFile">
        <i class="layui-icon">&#xe67c;</i>上传文件
    </button>
    <button type="button" class="layui-btn layui-btn-primary" id="removeFile">
        <i class="layui-icon">&#xe640;</i>批量删除
    </button>
    <div class="layui-inline">
        <input class="layui-input" name="id" id="demoReload" autocomplete="off" placeholder="请输入搜索内容">
    </div>
    <button class="layui-btn" data-type="reload" >搜索</button>
</div>
<input  type="text" name="parentId" id="parentId" >
<div class="transparentDataTable">
<table class="layui-hide" id="LAY_table_user" lay-filter="user"></table>
</div>
<script type="text/html" id="barDemo">
    <a lay-event="download" title="下载"><i class="layui-icon layui-icon-download-circle" style="font-size: 20px;"></i></a>
    <a lay-event="share" title="分享"><i class="layui-icon layui-icon-share" style="font-size: 20px;"></i></a>
    <a lay-event="star" title="收藏"><i class="layui-icon layui-icon-star-fill" style="font-size: 20px;"></i></a>
    <a lay-event="edit" title="重命名"><i class="layui-icon layui-icon-edit" style="font-size: 20px;"></i></a>
    <a lay-event="del" title="删除"><i class="layui-icon layui-icon-delete" style="font-size: 20px;"></i></a>
    <a lay-event="tips" title="属性"><i class="layui-icon layui-icon-note" style="font-size: 20px;"></i></a>
    <a lay-event="copyFile" title="复制"><i class="layui-icon layui-icon-addition" style="font-size: 20px;"></i></a>
</script>
<div id="addFloderDiv">
    <div style=" margin: 0 auto;width:60%;margin-top:50px">
    <input type="text" name="floder" id="floder" placeholder="请输入文件夹名称" class="layui-input">
        <div style="text-align: center;margin-top: 30px">
            <button type="button" class="layui-btn layui-btn-normal" id="checkFloderBtn" >立即创建</button>
        </div>
    </div>
</div>
<div id="rename">
    <div style=" margin: 0 auto;width:60%;margin-top:50px">
        <input type="text" name="newName" id="newName" placeholder="请输入新名字" class="layui-input">
        <div style="text-align: center;margin-top: 30px">
            <button type="button" class="layui-btn layui-btn-normal" id="checkRenameBtn" >立即重命名</button>
        </div>
    </div>
</div>
<div id="copyFile" style="display:none">
    <div style="margin:0 auto; width: 60%;padding-top: 50px">
        <p style="color: #46b8da;size:15px ;margin-left: -40px;margin-top: -30px"><strong>原始文件路径:</strong></p>
        <strong><p style=";size:15px" id="orignPath"></p></strong>
        <p style="color: #46b8da;size:15px;margin-left: -40px "><strong>复制到:</strong></p>
        <div style="margin-left: -20px">
            <label for="newPath" style="color: #46b8da;size:15px;"><sapn><strong>obs:/senventh/</strong></sapn></label>
            <input type="text" name="newPath" id="newPath"  width="20px"><br>
        </div>
        <div style="text-align: center;margin-top: 5px;">
            <p style=";color: red;"><span  id="copyMsg" style="display: none;font-size: 15px" >正在复制</span></p>
        </div>
    </div>
</div>

<script src="layui/dist/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script type="text/html" id="filenameDev">
    {{# if(d.fileType=='文件夹'){ }}
    <a href="javascript:;" onclick="searchFileOfFloder('{{d.id}}');">  <i class="glyphicon glyphicon-folder-close" style="color: #F0DA72;font-size:16px;"></i>&nbsp;{{d.fileName}}</a>
    {{# }else{ }}
    <a href="javascript:;" onclick="getFile('{{d.fileAbsolute}}');"> <i class="glyphicon glyphicon-file" style="color: #A9A9A9;font-size:16px;"></i>&nbsp;{{d.fileName}}</a>
    {{# } }}
</script>
<script th:inline='none'>
    layui.use('table', function() {
        var table = layui.table;
        var $ = layui.$;
        $("#addFloderDiv").hide();
        $("#rename").hide();
        //方法级渲染
        table.render({
            elem: '#LAY_table_user'
            , url: 'getAllFile'
            , cols: [[
                {checkbox: true, fixed: true}
                , {field: 'fileName', title: '文件名', templet: '#filenameDev'}
                , {
                    field: 'uploadTime', title: '上传时间', width: 300, sort: true,
                    templet: "<div>{{layui.util.toDateString(d.uploadTime,'yyyy-MM-dd HH:mm:ss')}}</div>"
                }
                , {field: 'fileSize', title: '文件大小', width: 200, sort: true}
                , {field: 'fileType', title: '文件类型', width: 200, sort: true}
                , {field: 'right', title: '操作', width: 250, align: 'center', toolbar: '#barDemo'}
            ]]
            , page: true
            , id: 'testReload'
            , parseData: function (res) {
                console.log(res);
                return {
                    "code": 0,
                    "msg": res.msg,
                    "count": res.count,
                    "data": res.data
                };
            }
        });

        var $ = layui.$, active = {
            reload: function () {
                var demoReload = $('#demoReload');
                //var searchStr=$('#searchStr');
                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        id: demoReload.val()
                    }
                });
            }

        };

        $('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        $("#addFile").click(function () {
            layer.open({
                type: 1,
                skin: 'layui-layer-rim', //加上边框
                area: ['500px', '300px'], //宽高
                content: $("#addFloderDiv")
            });
        });
        $("#checkFloderBtn").click(function () {
            var floder = $("#floder").val();
            var parentId = $("#parentId").val();
            if (floder == "") {
                layer.alert("请给文件夹起个名字吧！");
            } else {
                $.ajax({
                    url: 'insertFloder',
                    type: "get",
                    data: {fileName: floder, parentId: parentId},
                    dataType: "json",
                    success: function (res) {
                        if (res.code == 0) {
                            layer.open({
                                title: '提示信息'
                                , content: '文件夹创建成功'
                                , btn: ['确定']
                                , yes: function () {
                                    window.location.reload();
                                }
                            })
                        } else {
                            layer.alert(res.msg);
                        }
                    },
                    error: function () {
                        layer.alert("系统出错，请联系管理员")
                    }
                })
            }
        });

        table.on('tool(user)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
            var tr = obj.tr;
            if (layEvent == 'download') {
                document.location.href = "download?fileAbsolute=" + data.fileAbsolute;
            } else if (layEvent == 'del') {
                layer.confirm('真的删除行吗', function (index) {
                    obj.del();
                    layer.close(index);
                    trash(data.fileAbsolute);
                });
            } else if (layEvent == 'edit') {
                layer.open({
                    type: 1,
                    skin: 'layui-layer-rim', //加上边框
                    area: ['500px', '300px'], //宽高
                    content: $("#rename")
                });
                $("#checkRenameBtn").click(function () {
                    var newName = $("#newName").val();
                    var oldName = data.fileName;
                    if (newName == "") {
                        layer.alert("请输入新名字！");
                    } else {
                        $.ajax({
                            url: 'rename',
                            type: "get",
                            data: {oldName:oldName, newName:newName},
                            dataType: "json"
                        })
                    }
                    window.location.reload();
                });
            }
             else if (layEvent == 'share') {
                getUrl(data.fileAbsolute);
                share(data.fileAbsolute);
            } else if (layEvent == 'star') {
                collect(data.fileAbsolute);
            }else if (layEvent == 'tips') {
                alert('上传者：'+data.userId+'\r全路径：'+data.fileAbsolute+'\r文件类型：'+data.fileType+'\r文件大小：'+data.fileSize);
            }else if (layEvent == 'copyFile') {
                alert("这里是文件复制");
                document.getElementById("orignPath").innerText ="obs:/senventh/"+ data.fileAbsolute;
                layer.open({
                    type: 1,
                    skin: 'layui-layer-rim', //加上边框
                    area: ['500px', '300px'], //宽高
                    content: $("#copyFile"),
                    btn: ['确认', '取消'],
                    yes: function () {
                        //刷新当前页面
                        document.getElementById("copyMsg").style.display = "block";
                        var newPath = document.getElementById("newPath").value;
                        document.location.href = "copyFile?orignPath=" + data.fileAbsolute + "&newPath=" + newPath;
                    }
                });
            }

        });
    });


        function searchFileOfFloder(id){
            alert(id);
            if (id != "") {
                $("#parentId").val(id);
            }

        }
        function rename(oldName,newName) {
            alert(oldName+"旧新"+newName);
            var $ = layui.$;
            $.ajax({
                url: 'rename',
                type: "get",
                data:{oldName:oldName,newName:newName},
                dataType: "json",
                success: function (res) {
                    layer.alert(res.url);
                }
            })
        }
        function getFile(data) {
            var $ = layui.$;
            alert(data);
            $.ajax({
                url: 'getFile',
                type: "get",
                data: {fileAbsolute: data},
                dataType: "json",
                success: function (res) {
                    alert(res.url);
                    layer.open({
                        type: 2,
                        title: false,
                        area: ['640px', '400px'],
                        shade: 0.8,
                        closeBtn: 0,
                        shadeClose: true,
                        content: res.url
                    });
                }

            })
        }

    function getUrl(data) {
        var $ = layui.$;
        $.ajax({
            url: 'getFile',
            type: "get",
            data: {fileAbsolute: data},
            dataType: "json",
            success: function (res) {
                layer.alert("分享链接为: "+res.url)
            }

        })
    }
    function share(data){
            alert("分享");
        var  $=layui.$;
        $.ajax({
            url:'share',
            type:"get",
            data:{fileAbsolute:data},
            dataType:"json",
            success:function (res) {
                alert("分享成功");
            }
        })
    }
    function collect(data){
        alert("收藏");
        var  $=layui.$;
        $.ajax({
            url:'collect',
            type:"get",
            data:{fileAbsolute:data},
            dataType:"json",
            success:function (res) {
                alert("收藏成功");
            }
        })
    }
    function trash(data){
        alert("删除");
        var  $=layui.$;
        $.ajax({
            url:'trash',
            type:"get",
            data:{fileAbsolute:data},
            dataType:"json",
            success:function (res) {
                alert("删除成功");
            }
        })
    }
    layui.use(['upload', 'layer'], function () {
            var upload = layui.upload;
            var layer = layui.layer;

            //执行实例
            var uploadInst = upload.render({
                elem: '#uploadFile' //绑定元素
                , url: 'uploadFile' //上传接口
                , accept: 'file'
                , done: function (res) {
                    if (res.code == 0) {
                        layer.open({
                            title: '提示信息'
                            , content: '上传成功'
                            , btn: ['确定']
                            , yes: function () {
                                window.location.reload();
                            }
                        })
                    } else {
                        layer.alert(res.msg);
                    }
                }
                , error: function () {
                    //请求异常回调
                    layer.alert("系统出错，请联系管理员");
                }
            });
        });
</script>


</body>
</html>